import React from 'react'
import { useRef } from 'react'
import ClassSon from './components/ClassSon'
import FunSon from './components/FunSon'

export default function App() {
    /**
     * 1. ref 绑定 dom元素：获取真实dom
     * 2. ref 作为标识，单独模拟componentDidUpdate
     * 3. 给组件绑定:
     *      3-1. 给类组件绑定
     *           能够获取类组件的实例对象
     *      3-2. 给函数组件绑定
     *           1. 函数组件本身不支持ref属性，会报错。如果要绑定需要借助， React.forwardRef()处理
     *           2. export default React.forwardRef(函数组件)，处理后可以给函数组件绑定ref属性
     *              实现在父组件中获取到子组件的真实dom元素
     */ 
    const funRef = useRef('fun')
    const classRef = useRef()
    return (
        <div>
            <h3>App</h3>

            <hr />
            <FunSon ref={funRef}/>
            <hr />
            <ClassSon ref={classRef}/>

            <button onClick={()=>{
                console.log('funRef', funRef)
                console.log('classRef: ', classRef)
                funRef.current.style.color = 'red'
            }}>获取ref</button>
        </div>
    )
}
